mixin monitorStatus(status)
  case status
    when 2
      .icon.icon-status.up(title="正常")
    when 8
      .icon.icon-status.seem-down(title="波动")
    when 9
      .icon.icon-status.down(title="异常")
    default
      .icon.icon-status.pause(title="无数据")

mixin uptime(uptime)
  .icon-uptime(
    class=(uptime.uptime==0?"pause":uptime.uptime<95?"down":uptime.uptime<100?"seem-down":"up"),
    title="<small>" + uptime.date + "<br>" + "可用率 " + uptime.uptime+ "%</small>"
  )


doctype html
html
  head
    meta(http-equiv="Content-Type" content="text/html; charset=utf-8")
    meta(http-equiv="Cache-Control" content="no-transform")
    meta(http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1")
    meta(name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover")
    meta(name="renderer" content="webkit")
    meta(http-equiv="Content-Security-Policy" content="upgrade-insecure-requests")
    meta(name="theme-color" content="#0F7D00")
    meta(property="og:image" content="https://s.cdn.ink/image/others/bingo.jpeg")
    meta(name="msapplication-TileColor" content="#0F7D00")
    title=config.title
    link(rel="stylesheet", href="css/app.css")
    link(rel="shortcut icon" href="https://s.cdn.ink/images/others/favicon.ico" type="image/x-icon")
  body
    #app
      section.header
        .container
          h1.header-title=config.title
          .card
            .summary
              if (data.sum.down > 0)
                .icon.icon-status-sum.down
              else
                .icon.icon-status-sum.up
              div(style="letter-spacing:-0.5px;")
                if (data.sum.down > 0)
                    .summary-detail="有 " + data.sum.down + " 个服务异常！"
                else
                  .summary-detail="所有服务正常。"
                .summary-checktime=data.sum.checktime +" GMT+08:00"

      section.content
        .container
          - for (var index in data.groups)
            .card.monitors.has-children
              .monitors-header
                .monitors-header-title=data.groups[index].name
                if (data.groups[index].down > 0)
                  .icon.icon-status.down
                else
                  .icon.icon-status.up
              .monitors-content-wrap
                .monitors-content
                  each monitor in data.groups[index].monitors
                    .monitor
                      .monitor-header
                        .monitor-name=monitor.name
                        +monitorStatus(monitor.status)
                      .monitor-content
                        .monitor-uptime-range
                          span="最近 " + monitor.uptime.length + " 天"+"可用率 "
                              strong=monitor.totalUptime+ "% "
                          strong="今天"
                        .monitor-uptimes
                          each uptime in monitor.uptime
                            +uptime(uptime)




      section.footer
        .container
          .footer-content
            nav.links
              for link in config.links
                a(href=link.href, target="_blank")=link.name
            .copyright!="&copy; " + config.copyright

      script(src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/tippy.js/2.2.0/tippy.all.min.js")
      script("%c%c楠格%chttp://www.nange.cn", "line-height:28px;", "line-height:28px;padding:4px;background:#2ccbe6;color:#FADFA3;font-size:14px;", "padding:4px 4px 4px 2px;background:#ff146d;color:green;line-height:28px;font-size:12px;")
      script
        include ../public/js/open.js
        include ../public/js/tippy.js
